
import React from 'react';
import { View, Text, Image, StyleSheet, Dimensions, ScrollView } from 'react-native';
import { Button, Flex, InputItem, Toast, List } from 'antd-mobile-rn';
import constants from '../../utils/constants';
import loginService from '../../service/loginService';


const window = Dimensions.get("window");

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ffffff',
        height: "100%"
    },
    logo: {
        alignItems: 'center',
        top: 50,
        height: 120

    },
    loginBtnView: {
        padding: 50,
        paddingBottom: 20
    },
    registerText: {
        fontSize: 14,
        color: "#ccc"
    },
    InputItemView: {
        padding: 20,
        paddingRight: 40,
        paddingBottom: 0,
        marginTop: 30,
    },
    loginTitle: {
        fontSize: 18,
        paddingLeft: 15

    }
});


export default class BindPhone extends React.Component {

    // static navigationOptions = (e) => {
    //     return {
    //         title: "",
    //         headerBackTitle: null,
    //         // header: (e) => {
    //         //     return (
    //         //         <View style={{ display: "none" }}></View>
    //         //     );
    //         // }
    //     }
    // }


    state = {
        phone: "",
        otherLoginView: "flex",
    }

    timer = null

    constructor(props) {
        super(props);
        this.navigation = this.props.navigation;
    }

    componentDidMount() {


        // BackHandler.addEventListener("hardwareBackPress",()=>true);


    }

    componentWillUnmount() {
        // BackHandler.removeEventListener("hardwareBackPress",()=>true);
    }





    handleClick = () => {
        // console.log("click...")

        if (!this.state.phone) {
            Toast.info("手机号码不能为空", 1.2);

            return;
        }
        const { navigate } = this.navigation;


        const phone = this.state.phone.replace(/\s/g, "");
        //发送验证码
        loginService.sendCode({
            serviceType: "bind",
            phone: phone
        }, () => {
            navigate("InputBindPhoneCode", { phone: this.state.phone });
        });

    }

    render() {
        const { navigate } = this.navigation;
        return (
            <View style={styles.container} >
                <ScrollView>
                    <View style={styles.InputItemView}>
                        <Text style={styles.loginTitle}>绑定手机</Text>
                    </View>

                    <View style={styles.InputItemView}>
                        <InputItem
                            clear
                            type="phone"
                            value={this.state.phone}
                            placeholder={"请输入手机号"}
                            onChange={(value) => {
                                this.setState({
                                    phone: value,
                                });
                            }}
                            onBlur={() => {
                                this.setState({ otherLoginView: "none" })
                            }}

                        ><Text>手机: +86</Text></InputItem>

                    </View>
                    <View style={{ padding: 30, marginTop: 20 }}>
                        <Button
                            onClick={this.handleClick}
                            activeStyle={{ backgroundColor: constants.themeColor }}
                            type="primary"
                            style={{ backgroundColor: constants.themeColor, borderColor: constants.themeColor }}>确定</Button>
                    </View>
                </ScrollView>
            </View>
        )
    }
}